<style lang="scss">
.el-checkbox-group {
  display: inline-block;
}

.el-switch__label--left {
  position: relative;
  left: 60px;
  color: #fff;
  z-index: -1111;
}
.el-switch__label--right {
  position: relative;
  right: 60px;
  color: #fff;
  z-index: -1111;
}
.el-switch__label.is-active {
  z-index: 1111;
  color: #fff;
}
.el-switch__core {
  font-size: 12px !important;
  width: 60px !important;
}

.el-switch__label span {
  font-size: 13px !important;
}

.el-form-item {
  margin-bottom: 8px !important;
}
</style>

<style lang="scss" scoped>
.dashboard-container {
  background-color: #f0f2f5;
  padding: 10px 20px 20px 20px;
  min-height: calc(100vh - 84px);
  font-size: 12px;
}

form label.el-form-item__label {
  font-weight: normal !important;
}

.dashboard {
  &-container {
    // background-color: #f0f2f5;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.link-type {
  color: #337ab7;
  cursor: pointer;
}

.form-column-row {
  display: flex;
  align-items: center;
}

.form-column-item {
  display: inline-block;
}
</style>


<template>
  <div class="dashboard-container">
    <el-row style="margin-top: 10px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-button-group style="margin-bottom: 18px">
            <el-button
              size="small"
              icon="el-icon-delete"
              :loading="operationLoading"
              @click="operation('IGNORE')"
              >批量忽略</el-button
            >
            <el-button
              size="small"
              icon="el-icon-star-on"
              :loading="operationLoading"
              @click="operation('CONFIRM')"
              >批量确认</el-button
            >
            <el-button
              size="small"
              icon="el-icon-download"
              title="爬取“岑溪人家”和“岑溪家园”的招聘信息"
              :loading="spiderLoading"
              @click="spider()"
              >载入网络招聘数据</el-button
            >
            <el-button
              size="small"
              icon="el-icon-upload"
              title="本地导入梧州同城招聘信息"
              @click="spider(true)"
              >导入梧州同城招聘信息</el-button
            >
            <el-button
              size="small"
              icon="el-icon-circle-plus"
              title="跳转到“新建招聘页面”"
              >新建招聘</el-button
            >
            <el-button
              size="small"
              icon="el-icon-view"
              @click="operation('AUDITIONING')"
              >长截图预览</el-button
            >
            <el-button
              size="small"
              icon="el-icon-download"
              :loading="screenShotLoading"
              @click="operation('SCREENSHOT')"
              >长截图导出</el-button
            >
          </el-button-group>

          <el-form
            ref="majorForm"
            :model="majorForm"
            label-width=""
            size="mini"
          >
            <el-form-item label="">
              <el-date-picker
                size="small"
                v-model="majorForm.searchDate"
                type="date"
                placeholder="选择查询日期"
                style="width: 150px"
              ></el-date-picker>
              <div style="display: inline-block; width: 180px">
                <el-input
                  suffix-icon="el-icon-search"
                  size="small"
                  placeholder="请输入搜索关键字"
                ></el-input>
              </div>
              <div
                style="
                  height: 28px;
                  line-height: 28px;
                  display: inline-block;
                  vertical-align: middle;
                "
              >
                <el-switch
                  v-model="majorForm.star"
                  active-value="true"
                  inactive-value="false"
                  active-text="星选"
                  inactive-text="普通"
                ></el-switch>
              </div>
            </el-form-item>
            <el-form-item label="" class="form-column-row">
              <div class="form-column-item">
                <el-checkbox-group v-model="majorForm.type">
                  <el-checkbox-button label="SPIDER"
                    >站外招聘</el-checkbox-button
                  >
                  <el-checkbox-button label="ORIGINAL"
                    >原创招聘</el-checkbox-button
                  >
                  <el-checkbox-button label="GOVERNMENT"
                    >公职招聘</el-checkbox-button
                  >
                </el-checkbox-group>
              </div>
              <div class="form-column-item">
                <el-checkbox-group
                  v-model="majorForm.status"
                  style="margin-left: 20px"
                >
                  <el-checkbox-button label="INIT">未审核</el-checkbox-button>
                  <el-checkbox-button label="IGNORE">忽略</el-checkbox-button>
                  <el-checkbox-button label="CONFIRM"
                    >审核通过</el-checkbox-button
                  >
                  <el-checkbox-button label="PUBLISH"
                    >已发布</el-checkbox-button
                  >
                </el-checkbox-group>
              </div>
              <div class="form-column-item" style="margin-left: 20px">
                <el-button
                  icon="el-icon-search"
                  size="mini"
                  title="查询"
                  type="primary"
                  round
                  :loading="searchLoading"
                  @click="search()"
                  >查询</el-button
                >
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-row>

    <el-row style="margin-top: 10px">
      <el-card class="box-card">
        <el-table
          ref="jobTable"
          :data="jobList"
          border
          stripe
          style="width: 100%"
          :loading="jobTableLoading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column label="标题-正文" prop="title">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-edit-outline"
                size="mini"
                title="编辑"
                type="warning"
                plain
                @click="operation('EDIT', scope.row)"
                >{{ scope.row.oid }}</el-button
              >
              <a target="_blank" class="link-type" :href="scope.row.link">
                <strong>{{ scope.row.title }}</strong>
              </a>
              <p v-html="scope.row.text"></p>
            </template>
          </el-table-column>
          <el-table-column width="200" prop="author">
            <template slot-scope="scope">
              <div>
                <el-tag size="mini" type="info" disable-transitions>{{
                  scope.row.author
                }}</el-tag>
                <el-tag size="mini" type="info" disable-transitions>{{
                  scope.row.recordTime | momentFormat("YYYY-MM-DD")
                }}</el-tag>
              </div>
              <div>
                <el-tag size="mini" disable-transitions>{{
                  TYPE_MAP[scope.row.type]
                }}</el-tag>
                <el-tag
                  size="mini"
                  :style="{
                    'background-color': STATUS_MAP[scope.row.status].color,
                    color: '#fff',
                  }"
                  disable-transitions
                  >{{ STATUS_MAP[scope.row.status].text }}</el-tag
                >
              </div>
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: baseline;
                "
              >
                <el-button
                  style="margin-bottom: 4px; margin-top: 4px"
                  :icon="
                    scope.row.star ? 'el-icon-star-on' : 'el-icon-star-off'
                  "
                  size="mini"
                  @click="star(scope.$index, scope.row.oid, !scope.row.star)"
                  >设为星选</el-button
                >
                <el-button
                  @click="singleOperate('CONFIRM', scope.row)"
                  type="success"
                  style="margin-left: 0; margin-bottom: 4px"
                  icon="el-icon-check"
                  title="确认"
                  size="mini"
                  >确认</el-button
                >
                <el-button
                  @click="singleOperate('IGNORE', scope.row)"
                  type="danger"
                  style="margin-left: 0"
                  icon="el-icon-delete"
                  title="忽略"
                  size="mini"
                  >忽略</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { SIGPIPE } from "constants";
import request from "@/utils/request";
import axios from "axios";

const axiosForm = axios.create({
  timeout: 1000 * 60 * 8, // request timeout
  headers: {
    "Content-Type": "application/json",
  },
});

export default {
  name: "Dashboard",
  data() {
    return {
      screenShotLoading: false,
      // navBarFixed: false,
      majorForm: {
        searchDate: new Date(),
        type: ["SPIDER"],
        status: ["INIT"],
        star: false,
      },
      jobList: [],
      jobTableLoading: false,
      jobSelection: [],
      TYPE_MAP: {
        SPIDER: "站外招聘",
        ORIGINAL: "原创招聘",
        GOVERNMENT: "公职招聘",
      },
      STATUS_MAP: {
        INIT: {
          text: "未审核",
          color: "#3A71A8",
        },
        IGNORE: {
          text: "忽略",
          color: "#909399",
        },
        CONFIRM: {
          text: "审核通过",
          color: "#4AB7BD",
        },
        PUBLISH: {
          text: "已发布",
          color: "#ccc",
        },
      },
      searchLoading: false,
      operationLoading: false,
      spiderLoading: false,
    };
  },
  created() {
    this.getJobList();
  },
  computed: {
    selectJobList: function () {
      let resultArr = [];

      this.jobSelection.forEach((jobItem, i) => {
        resultArr.push(jobItem.oid);
      });
      return resultArr;
    },
  },
  methods: {
    search() {
      this.searchLoading = true;
      this.getJobList().then((res) => {
        this.searchLoading = false;
      });
    },
    handleSelectionChange(arr) {
      this.jobSelection = arr;
    },
    // 查询招聘列表
    async getJobList() {
      let self = this;
      self.jobTableLoading = true;
      self.jobList = [];

      const resp = await axiosForm.get("http://127.0.0.1:7001", {
        params: {
          status: self.majorForm.status,
          type: self.majorForm.type,
          star: self.majorForm.star,
          searchDate: new Date(self.majorForm.searchDate).getTime(),
        },
      });

      self.jobTableLoading = false;
      let jobMap = resp.data.jobList;

      self.jobList = self.jobList
        .concat(jobMap.govList)
        .concat(jobMap.orgList)
        .concat(jobMap.spiderList);
      // console.log(self.jobList);
    },
    // 爬取招聘信息
    spider(isLocal) {
      this.$confirm("确认抓取招聘信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // this.spiderLoading = true;
        if (isLocal) {
          // 爬取梧州同城招聘网的招聘数据
          axiosForm.post("http://127.0.0.1:7001/spider/get?target=wztc");
        } else {
          // Promise.all(
          //   axiosForm.post("http://127.0.0.1:7001/spider/get?target=cxrj"),
          //   axiosForm.post("http://127.0.0.1:7001/spider/get?target=cxjy")).then(res => {
          //     this.spiderLoading = false;
          //     console.log('result');
          //   });
          // 爬取岑溪人家的招聘数据
          axiosForm.post("http://127.0.0.1:7001/spider/get?target=cxrj");
          // 爬取岑溪家园的招聘数据
          axiosForm.post("http://127.0.0.1:7001/spider/get?target=cxjy");
        }

        this.$message({
          type: "success",
          message: "已执行爬虫作业！",
        });
      });
    },
    // 单个操作
    singleOperate(type, data) {
      this.$confirm(
        `是否【${type == "IGNORE" ? "忽略" : "确认"}】该招聘信息？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        let url =
          type == "IGNORE"
            ? "http://127.0.0.1:7001/job/batchIgnore"
            : "http://127.0.0.1:7001/job/batchConfirm";
        let oids = [data.oid];

        axiosForm
          .post(url, {
            oids,
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "操作成功！",
            });
            this.operationLoading = false;
            this.getJobList();
          })
          .catch(() => {
            this.$message({
              type: "error",
              message: "操作失败！",
            });
          });
      });

      if (type == "IGNORE") {
      }
    },
    // 操作栏
    operation(type, data) {
      if (type === "IGNORE") {
        this.operationLoading = true;
        this.$confirm("确认【忽略】该招聘信息？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          axiosForm
            .post("http://127.0.0.1:7001/job/batchIgnore", {
              oids: this.selectJobList,
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "操作成功！",
              });
              this.operationLoading = false;
              this.getJobList();
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "操作失败！",
              });
            });
        });
      } else if (type === "CONFIRM") {
        this.operationLoading = true;
        this.$confirm("是否【确认】该招聘信息？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          axiosForm
            .post("http://127.0.0.1:7001/job/batchConfirm", {
              oids: this.selectJobList,
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "操作成功！",
              });
              this.operationLoading = false;
              this.getJobList();
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "操作失败！",
              });
            });
        });
      } else if (type === "EDIT") {
        this.$router.push({
          path: "/job/edit/" + data.oid,
        });
      } else if (type === "AUDITIONING") {
        window.open("http://localhost:8080", "_blank");
      } else if (type === "PUBLISH") {
        this.$confirm("将所有【已确认】的招聘信息标记为【已发布】？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          axiosForm
            .post("http://127.0.0.1:7001/job/publish", {
              oids: this.selectJobList,
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "操作成功！",
              });
              this.getJobList();
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "操作失败！",
              });
            });
        });
      } else {
        this.screenShotLoading = true;
        axiosForm.get("http://127.0.0.1:7001/job/screen_shot").then(() => {
          this.screenShotLoading = false;
        });
      }
    },
    // 设置星选
    star(index, oid, flag) {
      axiosForm
        .post("http://127.0.0.1:7001/job/star", {
          oid: oid,
          flag: flag,
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "设置星选成功！",
          });
          this.jobList[index].star = flag;
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "操作失败！",
          });
        });
    },
    // watchScroll() {
    //   var scrollTop =
    //     window.pageYOffset ||
    //     document.documentElement.scrollTop ||
    //     document.body.scrollTop;
    //   //  当滚动超过 50 时，实现吸顶效果
    //   if (scrollTop > 49) {
    //     this.navBarFixed = true;
    //   } else {
    //     this.navBarFixed = false;
    //   }
    // }
  },
};
</script>


